<template>
  <div class="page-container welcome-page">
    <div class="card-container welcome-card">
      <div class="page-header welcome-header">
        <img src="../assets/svg/vite.svg" alt="Logo" class="logo float-animation">
        <h1 class="welcome-title gradient-text">欢迎使用文档管理系统</h1>
      </div>
      
      <div class="welcome-content centered-content">
        <!-- 用户已登录 -->
        <template v-if="isLoggedIn">
          <p class="welcome-message">您已成功登录系统，请选择以下操作继续：</p>
          
          <div class="action-buttons">
            <el-button type="primary" size="large" @click="goToDashboard">
              <el-icon class="button-icon"><Monitor /></el-icon>
              进入控制台
            </el-button>
            <el-button size="large" @click="goToDocuments">
              <el-icon class="button-icon"><Document /></el-icon>
              浏览文档
            </el-button>
            <el-button size="large" @click="goToHelp">
              <el-icon class="button-icon"><QuestionFilled /></el-icon>
              使用帮助
            </el-button>
          </div>
          
          <div class="welcome-features">
            <h2>系统功能</h2>
            <el-row :gutter="30">
              <el-col :lg="8" :md="12" :sm="24" v-for="(feature, index) in features" :key="index">
                <div class="feature-item">
                  <el-icon :size="40" class="feature-icon">
                    <component :is="feature.icon"></component>
                  </el-icon>
                  <h3>{{ feature.title }}</h3>
                  <p>{{ feature.description }}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        
        <!-- 用户未登录 -->
        <template v-else>
          <p class="welcome-message">请先登录或注册以使用系统功能</p>
          
          <div class="auth-container">
            <div class="auth-buttons">
              <el-button type="primary" size="large" @click="goToLogin">
                <el-icon class="button-icon"><User /></el-icon>
                登录
              </el-button>
              <el-button type="success" size="large" @click="goToRegister">
                <el-icon class="button-icon"><Plus /></el-icon>
                注册
              </el-button>
            </div>
          </div>
          
          <div class="welcome-features guest-features">
            <h2>系统介绍</h2>
            <div class="guest-message">
              <p>文档管理系统提供全面的文档管理解决方案，注册登录后即可体验以下功能：</p>
            </div>
            <el-row :gutter="30">
              <el-col :lg="8" :md="12" :sm="24" v-for="(feature, index) in features" :key="index">
                <div class="feature-item">
                  <el-icon :size="40" class="feature-icon">
                    <component :is="feature.icon"></component>
                  </el-icon>
                  <h3>{{ feature.title }}</h3>
                  <p>{{ feature.description }}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
      
      <div class="page-footer welcome-footer">
        <p>当前版本: v1.0.0 | 更新日期: 2023-12-08</p>
        <p>© {{ new Date().getFullYear() }} 文档管理系统 - 技术支持: 400-123-4567</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { RoutesAlias } from '../router/modules/routerAlias'
import {
  Document, 
  FolderOpened, 
  Monitor, 
  Share,
  Lock,
  QuestionFilled,
  Edit,
  User,
  Plus
} from '@element-plus/icons-vue'
import { showNotification } from '../components/layout/GlobalNotification.vue'

const router = useRouter()
const isLoggedIn = ref(false)

// 功能特点数据
const features = [
  {
    icon: 'Document',
    title: '文档管理',
    description: '创建、上传、管理各类文档，支持多种格式'
  },
  {
    icon: 'FolderOpened',
    title: '分类整理',
    description: '多级目录管理，轻松组织各类文档资源'
  },
  {
    icon: 'Share',
    title: '共享协作',
    description: '团队共享文档，提高协作效率'
  },
  {
    icon: 'Edit',
    title: '在线编辑',
    description: '直接在线编辑文档，无需下载'
  },
  {
    icon: 'Lock',
    title: '安全保障',
    description: '权限管理和加密技术，保护文档安全'
  },
  {
    icon: 'Monitor',
    title: '数据分析',
    description: '文档使用分析，了解团队工作情况'
  }
]

// 导航方法
const goToDashboard = () => {
  router.push(RoutesAlias.Dashboard)
}

const goToDocuments = () => {
  router.push('/documents')
}

const goToHelp = () => {
  router.push('/help')
}

const goToLogin = () => {
  router.push(RoutesAlias.Login)
}

const goToRegister = () => {
  router.push(RoutesAlias.Register)
}

// 检查用户登录状态
const checkLoginStatus = () => {
  // 检查本地存储中是否有用户信息和令牌
  const token = localStorage.getItem('accessToken')
  const userInfo = localStorage.getItem('userInfo')
  
  if (token && userInfo) {
    // 验证令牌有效性等逻辑可以在这里添加
    isLoggedIn.value = true
    try {
      const userInfoObj = JSON.parse(userInfo)
      showNotification(
        `欢迎回来，${userInfoObj.nickname || userInfoObj.username || '用户'}`,
        '登录状态', 
        'success',
        3000
      )
    } catch (e) {
      console.error('解析用户信息失败', e)
    }
  } else {
    isLoggedIn.value = false
  }
}

// 组件挂载时检查登录状态
onMounted(() => {
  checkLoginStatus()
})
</script>

<style>
/* 全局样式已移到style.css中 */
</style>

<style scoped>
.welcome-page {
  background-image: radial-gradient(ellipse at top, #e6f7ff 0%, var(--el-bg-color-page) 70%);
}

.welcome-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.welcome-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}

.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
}

.welcome-message {
  font-size: 18px;
  color: var(--el-text-color-regular);
  text-align: center;
  margin-bottom: 2.5rem;
}

.action-buttons, .auth-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.action-buttons .el-button, .auth-buttons .el-button {
  min-width: 180px;
  padding: 15px 25px;
  font-size: 16px;
}

.guest-message {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 16px;
  color: var(--el-text-color-regular);
}

.welcome-features h2 {
  font-size: 24px;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
}

.welcome-features h2::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-success));
  border-radius: 2px;
}

.feature-item {
  height: 100%;
  background-color: #f8f9fc;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s;
  border: 1px solid var(--el-border-color-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  border-color: #d0d7de;
}

.feature-icon {
  color: var(--el-color-primary);
  margin-bottom: 1.5rem;
}

.welcome-footer {
  margin-top: 3rem;
  padding-top: 2rem;
}

.guest-features {
  margin-top: 2rem;
}

.auth-container {
  margin-bottom: 2rem;
}

.button-icon {
  margin-right: 8px;
}

@media (max-width: 768px) {
  .welcome-title {
    font-size: 28px;
  }
  
  .action-buttons, .auth-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .action-buttons .el-button, .auth-buttons .el-button {
    width: 100%;
    max-width: 280px;
  }
  
  .feature-item {
    padding: 1.5rem;
  }
}
</style>